<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <h1>首页</h1>

    <button id="btnLogout">退出登录</button>

    <script>
        $(function () {

            // 页面加载完成后，自动发起请求，获取用户姓名
            $.get('/api/username', (res) => {
                // status 为 0 表示获取用户名称成功；否则表示获取用户名称失败！
                if (res.status !== 200) {
                    alert('您尚未登录，请登录后再执行此操作！')
                    location.href = './login.html'
                } else {
                    alert('欢迎您：' + res.username)
                }
            })

            // 点击按钮退出登录
            $('#btnLogout').on('click', function () {
                // 发起 POST 请求，退出登录
                $.post('/api/logout', (res) => {
                    if (res.status === 200) {
                        // 如果 status 为 0，则表示退出成功，重新跳转到登录页面
                        location.href = './login.html'
                    }
                })
            })
        })
    </script>
</body>

</html>